<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">基本信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row ">
                <el-col :span="8">供应商名称：<span>{{ruleForm.name}}</span></el-col>
                <el-col :span="8">企业类型：<span>{{ruleForm.type}}</span></el-col>
                <el-col :span="8">注册资本：<span>{{ruleForm.registerCapital}} 万元</span></el-col>
                <el-col :span="8">法人：<span>{{ruleForm.legal}}</span></el-col>
                <el-col :span="8">邮箱：<span>{{ruleForm.account.email}}</span></el-col>
                <el-col :span="8">手机号：<span>{{ruleForm.mobile}}</span></el-col>
                <el-col :span="24">办公地址：<span>{{ruleForm.addressDetails}}</span></el-col>
                <el-col :span="8"><el-image style="width: 18px; height: 16px" :src="iconUrl" :preview-src-list="certificatePicPaths">
                    </el-image>营业执照
                </el-col>
                <el-col :span="8">
                    <el-image style="width: 18px; height: 16px" :src="iconUrl" :preview-src-list="[ruleForm.sellerDetail.legalSurname]">
                    </el-image>法人章模
                </el-col>
                <el-col :span="8">
                    <el-image style="width: 18px; height: 16px" :src="iconUrl" :preview-src-list="[ruleForm.sellerDetail.signaturePrincipal]">
                    </el-image>委托人签字
                </el-col>
                <el-col :span="8 " class="mb-0">
                    <el-image style="width: 18px; height: 16px" :src="iconUrl" :preview-src-list="[ruleForm.sellerDetail.surname]">
                    </el-image>章模
                </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-col :span="2" class="pl-0 pr-0" style="width:auto">营业范围：</el-col>
                    <el-col :span="22" style="line-height: 22px;"> <span>{{ruleForm.businessScope}}</span></el-col>
                </el-col>
            </el-row>
        </c-template>
        <c-template v-loading="loading" class="mb-lg tf-paragraph" v-if="isView && ruleForm.member.memberInfo">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">会员信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">会员等级：{{ruleForm.member.memberInfo.grade}}</el-col>
                <el-col :span="8">当前会员金额：{{ruleForm.member.currentAmount | thousands}} 元</el-col>
                <el-col :span="8">会员有效期：{{ruleForm.member.timeExpiry | dateYMDHMSFormat}}</el-col>
                <el-col :span="8">优惠比例：{{ruleForm.member.memberInfo.discountRatio}}%</el-col>
            </el-row>
            <el-row :gutter="24" class="info-row" v-if="ruleForm.sellerAmountLog && ruleForm.sellerAmountLog.length > 0 ">
                <el-col :span="24" class="detailsTitle">会员充值记录</el-col>
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" style="border:1px solid #f2f2f2" :data="ruleForm.sellerAmountLog">
                        <el-table-column label="序号" align="center" width="80" type="index" />
                        <el-table-column label="充值金额" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.amount | thousands }} 元
                            </template>
                        </el-table-column>
                        <el-table-column label="可用余额" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.postAmount | thousands }} 元
                            </template>
                        </el-table-column>
                        <el-table-column label="充值日期" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.timeCreate | dateYMDHMSFormat }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </c-template>
        <c-template class="tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">审批记录</el-col>
            </el-row>
            <el-divider></el-divider>
            <c-approval-process :id="ruleForm.id" :loading="loading" :supplierName="ruleForm.name" @isLoading="changeLoading" :status="ruleForm.account.authStatus"></c-approval-process>
        </c-template>
    </div>

</template>
<script>
import cApprovalProcess from './components/c-approval-process.vue';
export default {
    components: {
        cApprovalProcess
    },
    data () {
        return {
            iconUrl: require("@/assets/img/icon_Attachment@2x.png"),
            certificatePicPaths: [],
            loading: false,
            ruleForm: {
                member: {
                    memberInfo: {},
                },
                sellerDetail: {},
                account: {},
                certificatePicPath: [],
            },
            isExamine: false,
            isView: false,
            id: ""
        };
    },
    beforeCreate () {

    },
    mounted () {
        this.isExamine = this.$route.query.isExamine
        this.isView = this.$route.query.isView
        this.id = this.$route.query.id
        // console.log(this.id);
        this.getInfo()
    },
    methods: {
        changeLoading (loading) {
            this.getInfo()
            this.loading = loading
        },
        async getInfo () {
            if (this.$route.query.id) {
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/sellerInfo/getById", params })

                params.id = res.account.id
                let memberInfo = await this.$get({ url: "/sellerAmount/getSellerAmountById", params })
                let amount = await this.$get({ url: "/sellerAmount/getByAmountLog", params })
                this.loading = false;
                this.certificatePicPaths.push(res.certificatePicPath)
                this.ruleForm = {
                    ...res,
                    sellerAmountLog: amount || [],
                    member: memberInfo || {},
                    isExamine: this.$route.query.isExamine || false,
                }
            }
        }

    },
};
</script>
<style scoped lang="scss">
</style>
